<!DOCTYPE html>
<html class="layui-bg-white">
<head th:include="include :: header"></head>
<body>
<div class="layui-form" style="padding:20px;">
    <input type="hidden" id="examTime" name="examTime">
    <input type="hidden" id="firstTypeName" name="firstTypeName">
    <input type="hidden" id="secondTypeName" name="secondTypeName">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>科目名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入科目名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>目标分数：</label>
        <div class="layui-input-block">
            <input type="text" name="targetScore" lay-verify="required|number" placeholder="请输入目标分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-row layui-form-item">
        <div class="layui-col-md6">
            <label class="layui-form-label"><span class="required">*</span>一级类别：</label>
            <div class="layui-input-block">
                <select lay-filter="firstTypeId" id="firstTypeId" name="firstTypeId" class="form-control chosen-select" lay-search lay-verify="required">
                    <option value="">--请选择--</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md6">
            <label class="layui-form-label"><span class="required">*</span>二级类别：</label>
            <div class="layui-input-block">
                <select lay-filter="secondTypeId" id="secondTypeId" name="secondTypeId" class="form-control chosen-select" lay-search lay-verify="required">
                    <option value="">--请选择--</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>考试时间：</label>
        <div class="layui-input-block">
            <button id="examTimeAdd" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;"><i class="layui-icon"></i>添加</button>
        </div>
    </div>
    <div class="examTimeDiv">
        <div class="layui-row layui-form-item examTimeItem">
            <div class="layui-col-md5">
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入：例如，上半年" autocomplete="off" class="layui-input date">
                </div>
            </div>
            <div class="layui-col-md5">
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入：例如，05-26" autocomplete="off" class="layui-input time">
                </div>
            </div>
            <div class="layui-col-md2" style="text-align:right;">
                <button class="layui-btn layui-btn-sm layui-btn-danger examTimeDel"><i class="layui-icon"></i>删除</button>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-operate-submit" id="LAY-operate-submit" value="确认">
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index'         //主入口模块
    }).use(['index', 'form'], function () {
        var $ = layui.$, form = layui.form;

        form.verify(commonJs.form.verify);

        //初始化一二级类别
        function getDictList(type, parentId, target) {
            type = type || '';
            parentId = parentId || '';
            var url = ctx + "/manage/dict/dict/getDictList";
            var data = {'type': type, 'parentId': parentId};
            var success = function (result) {
                if (result.code == 0) {
                    $("#" + target).html("<option value=''>--请选择--</option>");
                    var data = result.data;
                    $.each(data, function (index, item) {
                        console.log(item.id)
                        $("#" + target).append("<option  value=" + item.id + ">" + item.name + "</option>");
                    });
                    form.render();
                }
            };
            commonJs.openAjax(url, data, success, null, false);
        }

        getDictList('bank_category', null, 'firstTypeId');

        form.on('select(firstTypeId)', function (data) {
            getDictList(null, data.value, 'secondTypeId');
            var value = data.value || '';
            var text = '';
            if (value != '') {
                text = data.elem[data.elem.selectedIndex].text || '';
            }
            $('#firstTypeName').val(text);
        });

        form.on('select(secondTypeId)', function (data) {
            var value = data.value || '';
            var text = '';
            if (value != '') {
                text = data.elem[data.elem.selectedIndex].text || '';
            }
            $('#secondTypeName').val(text);
        });

        //考试时间添加、删除
        $('#examTimeAdd').click(function () {
            examTimeAdd();
        });

        $('.examTimeDel').click(function () {
            $(this).parents('.examTimeItem').remove();
        });

        function examTimeAdd(date, time) {
            date = date || '';
            time = time || '';
            var htmlContent = '<div class="layui-row layui-form-item examTimeItem">\n' +
                '            <div class="layui-col-md5">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <input type="text" placeholder="请输入：例如，上半年" autocomplete="off" class="layui-input date" value="' + date + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-md5">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <input type="text" placeholder="请输入：例如，11-09" autocomplete="off" class="layui-input time" value="' + time + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-md2" style="text-align:right;">\n' +
                '                <button class="layui-btn layui-btn-sm layui-btn-danger examTimeDel"><i class="layui-icon"></i>删除</button>\n' +
                '            </div>\n' +
                '        </div>';

            $('.examTimeDiv').append(htmlContent);

            $('.examTimeDel').click(function () {
                $(this).parents('.examTimeItem').remove();
            });
        }
    })
</script>
</body>
</html>